<template>
  <view class="qiming-info-wrapper">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />
    <scroll-view scroll-y class="scroll-Y" @scrolltolower="lower">
      <view class="wrapper">
        <view class="item" v-for="ls in nameList" :key="ls">{{ls}}</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { yfgqimingApi } from "@/apis/qiuqian";

export default {
  data() {
    return {
      nameList: [],
      sex: 0,
      surname: ""
    };
  },
  onLoad(opt) {
    this.sex = opt.sex;
    this.surname = opt.name;
    this.init();
  },
  methods: {
    async init() {
      let { code, data } = await yfgqimingApi({
        limit: 150,
        page: 1,
        sex: this.sex,
        surname: this.surname
      });
      if (code == 1) {
        this.nameList = data.list;
      }
    },
    lower() {
      console.log(333);
    }
  }
};
</script>

<style lang="scss">
.qiming-info-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: #f6f6f6;
  position: relative;
  overflow: hidden;

  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
  .scroll-Y {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    .wrapper {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      .item {
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #c09351;
        padding: 5px 10px;
        border-radius: 20px;
        color: #c09351;
      }
    }
  }
}
</style>